<template>
    <div class="App">
        <div class="Title">一起健身吧！</div>
        <input class="input1" placeholder="输入手机号" v-model="user" />
        <input class="input2" placeholder="输入验证码" v-model="password" />
        <button class="botton2" :disabled="isCounting" @click="sendVerificationCode">
            {{ isCounting ? `重新发送(${countdown})` : '发送验证码' }}
        </button>
        <button class="botton1" @click="GotoHome">登录</button>
    </div>
</template>

<script setup lang="ts" name="LoginPage">
import { ref, onUnmounted } from 'vue';
import router from "@/router";
import axios from 'axios';

const user = ref(""); //手机号
const password = ref(""); //验证码
const countdown = ref(60); // 倒计时初始值  
const isCounting = ref(false); // 是否正在倒计时  
const isValid = ref(true);
const code = ref(null) //后端send的随机数


const sendVerificationCode = async () => {
    //手机号判断
    const regex = /^1[3-9]\d{9}$/
    isValid.value = regex.test(user.value);
    if (isValid.value === false) {
        alert("请输入正确的手机号")
    } else {
        if (!isCounting.value) {
             // 倒计时函数  
            startCountdown();
            // 发送验证码的逻辑  
           const {data} = await axios.post('http://127.0.0.1:3000/api/get_sms',{user})
           console.log(data);
           console.log(12312312);
           
        }
    }
};


// 倒计时逻辑  
const startCountdown = () => {
    if (countdown.value <= 0) return;

    isCounting.value = true;
    const intervalId = setInterval(() => {
        countdown.value--;
        if (countdown.value <= 0) {
            clearInterval(intervalId);
            isCounting.value = false;
            countdown.value = 60; // 重置倒计时  
        }
    }, 1000);

    // 在组件卸载时清除定时器  
    onUnmounted(() => {
        clearInterval(intervalId);
    });
};

const GotoHome = async () => {
    if(password.value == code.value ){
    //     await axios.post("http://localhost:3000/login",
    //     {
    //         user:"admin",
    //         password:123456
    //     }
    // )
    sessionStorage.setItem("用户",user.value+"用户")
        router.push("/home/index")
    }else{
        alert("请重新输入验证码")
    }
}


</script>

<style scoped>
.App {
    position: relative;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.61);
}

.Title {
    position: absolute;
    left: 54px;
    top: 161px;
    width: 300px;
    height: 72px;
    line-height: 72px;
    color: rgba(117, 187, 117, 1);
    font-size: 48px;
    text-align: center;
}

.input1 {
    position: absolute;
    left: 39px;
    top: 264px;
    width: 297px;
    height: 45px;
    line-height: 20px;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 1);
    color: rgba(136, 136, 136, 1);
    font-size: 16px;
    text-align: center;
    font-family: Microsoft Yahei;
    border: 1px solid rgba(187, 187, 187, 1);
}

.input2 {
    position: absolute;
    left: 39px;
    top: 326px;
    width: 178px;
    height: 45px;
    line-height: 20px;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 1);
    color: rgba(136, 136, 136, 1);
    font-size: 16px;
    text-align: center;
    font-family: Microsoft Yahei;
    border: 1px solid rgba(187, 187, 187, 1);
}

.botton2 {
    position: absolute;
    left: 239px;
    top: 326px;
    width: 98px;
    height: 45px;
    line-height: 20px;
    border-radius: 20px;
    background-color: #75BB75;
    color: white;
    font-size: 14px;
    text-align: center;
    border: none
}

.botton1 {
    position: absolute;
    left: 39px;
    top: 388px;
    width: 297px;
    height: 45px;
    line-height: 20px;
    background-color: #75BB75;
    color: white;
    font-size: 14px;
    text-align: center;
    font-family: Roboto;
    border: 1px solid rgba(255, 255, 255, 0);
    border-radius: 20px
}

.Other1 {
    position: absolute;
    left: 59px;
    top: 456px;
    width: 112px;
    height: 23px;
    line-height: 23px;
    color: rgba(64, 64, 64, 1);
    font-size: 16px;
    text-align: left;
    font-family: PingFangSC-regular;
}

.Other2 {
    position: absolute;
    left: 128px;
    top: 501px;
    width: 32px;
    height: 32px;
    background-color: rgba(63, 81, 181, 1);
}

.Other3 {
    position: absolute;
    left: 223px;
    top: 501px;
    width: 32px;
    height: 32px;
    background-color: rgba(37, 155, 36, 1);
}
</style>